<!DOCTYPE html>
<html>
    <head>
        <title>Chat HTML5</title>
        <style>
            aside {
                border: 1px solid black;
                border-radius: 15px;
                float: right;
                padding: 10px 20px;
                width: 100px;
            }
            
            summary {
                cursor: pointer;
            }
            
            ul {
                list-style: none;
                margin: 0;
                padding: 0 0 0 15px;
            }
            
            #chat {
                background-color: white;
                border: 2px solid black;
                border-radius: 10px;
                box-shadow: 5px 5px 4px #303030;
                float: left;
                height: 250px;
                padding: 10px;
                overflow: auto;
                width: 400px;
            }
            
            #texto {
                float: left;
                position: relative;
                width: auto;
            }
            
            input[type="text"] {
                border: 2px solid black;
                border-radius: 5px;
                box-shadow: 5px 5px 4px #303030;
                float: left;
                font-size: 20px;
                margin-top: 10px;
                padding: 2px 65px 2px 2px;
                width: 334px;
            }
            
            input[type="button"] {
                cursor: pointer;
                font-size: 15px;
                position: relative;
                left: -65px;
                top: 12px;
            }
            
            #config {
                border: 0;
                width: 150px;
            }
            
            label {
                padding-right: 5px;
                text-align: right;
                width: 90px;
                -webkit-transition: 0.5s;
                z-index: 1000;
                font-weight: bold;
            }
            
            label:hover {
                -webkit-transform: skew(45deg);
                text-shadow: -5px 5px 4px #333,
                    1px 1px 1px black,
                    -1px -1px 1px black,
                    1px -1px 1px black,
                    -1px 1px 1px black;
                color: white;
            }
            
            aside label, aside input {
                float: left;
            }
            
            input + label  {
                clear: both;
            }
            
            input[type="color"] {
                margin-bottom: 4px;
                position: relative;
                top: -5px;
                z-index: 100;
            }
            .spantime{
                color: #CCCCCC;
                font-size: 9px;
            }
            
        </style>
    </head>
    <body>
        <h1 id="nome">{{usuario}}</h1>
        <input type="hidden" id="bkColor" />
        <section>
            <article id="chat"></article>
            <aside>
                <details>
                    <summary>Usu&aacute;rios</summary>
                    <ul id="listaUsuarios">
                 
                    </ul>
                  </details>
            </aside>
        </section>
        <section style="clear: both;">
            <article id="texto">
                <input type="text" />
                <input type="button" id="enviar" value="Enviar"  />
            </article>
            <aside id="config">
                <label>Cor do Texto:</label><input id="cor_texto" type="color">
                <label>Cor do Fundo:</label><input id="cor_fundo" type="color">
            </aside>
        </section>
        <script type="text/javascript" src="/socket.io/socket.io.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
			var emoticon_triste = 	'<img src="" alt="Emoticon Triste" />';
			var emoticon_alegre = 	'<img src="" alt="Emoticon Alegre" />';
	        var corTexto = document.getElementById('cor_texto');
	        var corFundo = document.getElementById('cor_fundo');
	        corTexto.addEventListener("change",function(e){ mudaCor("color", e.srcElement.value) }, false);
	        corFundo.addEventListener("change",function(e){ mudaCor("backgroundColor", e.srcElement.value) }, false);
	        
	        

	        //comunicacao socket servidor
        	var socket = io.connect('http://192.168.1.6:1337/');
        	
        		
    		//pegando nome para registrar
    		var url = decodeURI(window.location);
    		nomeUrl = url.split("/");
    		if(nomeUrl != ""){
    			socket.emit("registro",{nome:nomeUrl[3]});
            }

            //setando propriedades do usuario
            socket.on("usuario", function(usuario){
                var colorUser = document.querySelector("#bkColor");
                colorUser.value = usuario.bkgColor;
            });

            //avisando para a sala do novo usuario
            socket.on("newUsuario", function(usuario){
                var msg = {
                    usuario : "NOVO USUARIO",
                    texto : usuario.nome,
                    textoColor: "#000",
                    textoBgColor: usuario.bkgColor,
                    timeMsg : new Date().getTime(),
                    userColor : "#FFF"
                };
                inserirMensagem(msg); 
            });

            //imprimindo ultimas mensagens registradas
            socket.on("last_chats",function(arrayMensagem){
                console.log(arrayMensagem);
                for(var i=0;i<arrayMensagem.length;i++){
                    inserirMensagem(arrayMensagem[i]);    
                }
            });
        	

        	//pegando mensagem ao clicar no botao------
        	document.getElementById("enviar").addEventListener("click",function(){
        		prepararMensagem();
        	});
            //pegando mensagem ao clicar no enter
            document.body.addEventListener("keypress",verificaEnter);


        	//imprimir mensagem
        	socket.on("printMensagem",function(mensagem){
        		inserirMensagem(mensagem);
        	});

            //imprimir usuarios online
            socket.on("usuariosOnline",function(arrayUsuarios){
                listaDeUsuarios(arrayUsuarios);
            });

            //verifica se o usuario esta apertando o enter
            function verificaEnter(e){
                var keynum;
                if(window.event){ // IE
                    keynum = e.keyCode;
                }else if(e.which){ // Netscape/Firefox/Opera
                    keynum = e.which;
                }
                if(keynum==13){
                    prepararMensagem();
                }else{
                    return;
                }
            }
            //preparando mensagem para envio
            function prepararMensagem(){
                var text = document.querySelector('#texto input[type="text"]');
                var msg = {
                    usuario : document.querySelector("#nome").innerHTML,
                    texto : text.value,
                    textoColor: text.style.color,
                    textoBgColor: text.style.backgroundColor,
                    timeMsg : new Date().getTime(),
                    userColor : document.querySelector("#bkColor").value
                };
                socket.emit("mensagem",msg);
                inserirMensagem(msg);
                text.value = "";
                text.focus();   
            }
            //enviando mensagem
        	function inserirMensagem(mensagem){
        		var horaMsg = new Date(mensagem.timeMsg).toLocaleTimeString();
                var user = '<span style="background-color: ' + mensagem.userColor + '">' + 
                           mensagem.usuario +'</span>';

                var chat = document.querySelector("#chat"),
                    msg = '<span class=\"spantime\" >('+horaMsg+')</span>  '+ user + ' : '+
                         '<span style="color: ' + mensagem.textoColor +
                           '; background-color: ' + mensagem.textoBgColor + '">' + 
                           mensagem.texto.replace(':(', emoticon_triste).replace(':)',emoticon_alegre) +
                         '</span>';
                chat.innerHTML += msg + '<br/>';
        	}
            //imprimi lista de usuarios logados
            function listaDeUsuarios(arrayUsuarios){
                var lista = "";
                $.each(arrayUsuarios,function(k,obj){
                    lista += "<li> <span style=\"background-color:"+ obj.bkgColor +"\">"+obj.nome+"</span></li>";
                });
                $("#listaUsuarios").html(lista);
            }
            //mudando as cores dos atributos
        	function mudaCor(attr, cor) {
                var text = document.querySelector('#texto input[type="text"]');
                text.style[attr] = cor;
            }

			
    </script>


    </body>
</html>





